<template lang="html">
    <div>
      <div class="search">
          <div class="input">
              <p><label>文档名称</label><el-input placeholder="请输入内容" label="条件" v-model="pageData.title"></el-input></p>
               <p><el-button type="primary" class="se" style="margin-left:10px;" @click='search'>搜索</el-button></p>
          </div>
      </div>
      <tableVue :list="list" :state="false" :radioShwo="false" :total="total" v-loading="pageData.loading" @sizeChange="handSize">
          <slot>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.row,1)">编辑
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    class="del"
                    @click="handleEdit(scope.row,2)">删除</el-button>
                </template>
            </el-table-column>
          </slot>
      </tableVue>
    </div>
</template>

<script>
  import Data from './docsListData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import checkPermission from "@/utils/permission"; // 权限判断函数
  import {
    docsList,
    delDocs
  } from "@/api/newDocs/newDocs";
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
        return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
      this.getDocsList()
    },
    methods : {
      handSize (val) {
        this.pageData.loading = true;
        var data = {
          size : '10',
          current : val
        }
        docsList(data).then(res=>{

          if (res.data.code =='OK'){

            this.list.tbody = res.data.data.records.map(item=>{
                item.docsType  = item.docsType == 'chain_url' ?'外链':'富文本';
                item.gmtCreate = this.switchTime(item.gmtCreate)
                item.gmtUpdate = this.switchTime(item.gmtUpdate)
                return item;
              })
              this.total = res.data.data.total;
              this.pageData.loading = false;
          } else {
              this.pageData.loading = false;
              this.$message.error(res.data.message);
          }
        })
      },
      getDocsList (data) {
        this.pageData.loading = true;
        //  data = {
        //   size : '10',
        //   current : '1'
        // }
        docsList(data).then(res=>{
          if (res.data.code =='OK'){
            this.list.tbody = res.data.data.records.map(item=>{
              	item.docsType  = item.docsType == 'chain_url' ?'外链':'富文本';
                item.gmtCreate = this.switchTime(item.gmtCreate)
                item.gmtUpdate = this.switchTime(item.gmtUpdate)
                return item;
              })
              this.total = res.data.data.total;
              this.pageData.loading = false;
          } else {
              this.pageData.loading = false;
              this.$message.error(res.data.message);
          }
        })
      },
      handleEdit (item,num) {
        if (num == 1) {
          this.$router.push({
            name : 'newDocs',
            query : {
              id:JSON.stringify(item.docsId),
            }
          })
        } else {
          var id = []
          id.push(item.docsId)
          this.delMessage(()=>{
            delDocs(id).then(res=>{
              if (res.data.code == 'OK') {
                this.$message.success('删除成功');
                this.getDocsList()
              } else {
                this.$message.error(res.data.message);
              }
            })
          })
        }
      },
      search () {
        var data = {
          docsName : this.pageData.title,
          size : '10',
        }
        this.getDocsList(data)
      }
    }
  }
</script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
</style>
